<template>
	<view class="businesshome_wp" id="businesshome_wp">
		<view class="businesshome_head">
			<image :src="headInfo.bakimg" mode="widthFix"></image>
			<view class="b_h_b">
				<image @click="$navTo(item[0])" :class="{'b_h_b_item':index==1}" v-for="(item,index) in headInfo.memu"
					:key="index" :src="item[1]" mode="widthFix"></image>
			</view>
		</view>

		<view class="businesshome_body">
			<view class="b_b_list" v-for="item in supplierList" :key="item.uid">
				<view class="b_b_l_nav">
					<view class="b_b_l_title">
						<image :src="item.logo"></image>
						<view class="b_b_l_t_name">
							<view>{{item.supname}}</view>
							<!-- <view><text>满100减5</text></view> -->
						</view>
					</view>
					<view class="b_b_business" @click="$navTo('../business/businessshop?uid='+item.uid)">进入店铺</view>
				</view>
				<view class="b_b_shop">
					<view class="b_b_s_item" v-for="item2 in item.goodsList" :key="item2.id" @click="$navTo('../product/product?id='+item2.id)">
						<image :src="item2.thumb"></image>
						<view class="b_b_s_title">{{item2.title}}</view>
						<view class="b_b_s_user_w">
							<view class="b_b_s_user" v-if="item2.ourmoney">
								自购返&nbsp;￥{{item2.ourmoney}}
							</view>
						</view>

						<view class="b_b_s_money">
							<text class="b_b_s_m_new"><text>￥</text>{{item2.saleprice}}</text>
							<text class="b_b_s_m_old">￥{{item2.productprice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loading_message">
			<image v-if="loading" src="../../static/business/loading.gif" mode=""></image>
			<text v-if="empty">没有更多了~</text>
		</view>
		<view v-show="plashow" class="platop-css" @click="platop">
			<image src="../../static/pla.png" mode="widthFix"></image>
			<view>顶部</view>
		</view>
		<bottom-tab/>
	</view>
</template>

<script>
	import BottomTab from '@/components/bottomtab.vue';
	export default {
		components:{BottomTab},
		data() {
			return {
				headInfo: {},
				supplierList: [],
				page: 0,
				height:uni.getSystemInfoSync().windowHeight,
				stopPage:false,
				loading:false,
				empty:false,
				
				plashow: false,
			}
		},
		onLoad() {
			this.getheadInfo();
			this.getsupplierinfo();
		},
		onPageScroll() {
			var top = '';
			const query = uni.createSelectorQuery().in(this);
			query.select('#businesshome_wp').boundingClientRect(data => {
				if (data.bottom <= this.height * 2) {
					this.getsupplierinfo();
				}
				top = data.top;
				this.plashow = top <= 120 ? true : false;
			}).exec();
		},
		methods: {
			getheadInfo() {
				this.$axios('index/main', 'POST', 'supplier').then(res => {
					if (res.data.code == 200) {
						this.headInfo = res.data.data;
					}
				})
			},
			getsupplierinfo() {
				if(this.stopPage) return ;
				this.stopPage=true;
				this.page++;
				this.loading=true;
				this.$axios('index/supplierList', 'POST', 'supplier',{page:this.page}).then(res => {
					this.loading=false;
					if (res.data.code == 200) {
						this.supplierList = this.supplierList.concat(res.data.data);
						if(res.data.data.length>0){
							this.stopPage=false;
						}else{
							this.stopPage = true;
							this.empty=true;
						}
					}
				})
			},
			platop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 30
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f6f5f5;
		padding-bottom: 140upx;
	}

	.businesshome_head {
		position: relative;
	}

	.businesshome_head image {
		width: 100%;
	}

	.b_h_b {
		position: absolute;
		bottom: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx;
		box-sizing: border-box;
		width: 100%;
	}

	.b_h_b_item {
		margin: 0 30upx;
	}

	.businesshome_body {
		padding: 30upx;
	}

	.b_b_list {
		background-color: #fff;
		border-radius: 20upx;
		padding: 20upx;
		margin-bottom: 30upx;
	}

	.b_b_l_nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.b_b_l_title {
		display: flex;
		align-items: center;
	}

	.b_b_l_title image {
		border-radius: 10upx;
		height: 90upx;
		width: 90upx;
	}

	.b_b_l_t_name {
		padding-left: 20upx;
		line-height: 45upx;
	}

	.b_b_l_t_name view:nth-of-type(1) {
		font-weight: bold;
		font-family: '思源黑体';
	}

	.b_b_l_t_name text {
		background: #ffb49e;
		border: 1px #fff8f5 solid;
		border-radius: 6upx;
		color: #fd0e00;
		display: inline-block;
		font-size: $font-sm;
		padding: 0 20upx;
		letter-spacing: 1px;
		line-height: 40upx;
	}

	.b_b_business {
		background: linear-gradient(to right, #ff9320, #d91a33, #fe6f52);
		border-radius: 30upx;
		color: #fff;
		line-height: 60upx;
		padding: 0 30upx;
		font-size: 30upx;
	}

	.b_b_shop {
		margin-top: 20upx;
		display: flex;
		align-items: center;
	}
	
	
	.b_b_s_item {
		box-sizing: border-box;
		width: calc(100% / 3);
		padding-right: 20upx;
	}
	.b_b_s_item:nth-of-type(3n +3){
		padding-right: 0;
	}

	.b_b_s_item image {
		border-radius: 10upx;
		height: 204upx;
		width: 100%;
	}

	.b_b_s_title {
		font-weight: bold;
		font-family: '思源黑体';
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.b_b_s_user_w {
		line-height: 36upx;
		height: 36upx;
		margin: 6upx 0 8upx;
	}

	.b_b_s_user {
		background-color: rgb(241, 215, 156);
		color: rgb(142, 66, 0);
		display: inline-block;
		padding: 0 10upx;
		border-radius: 8upx;
		font-size: 20upx;
	}

	.b_b_s_money {
		color: $base-color;
	}

	.b_b_s_m_new {
		font-weight: bold;
	}

	.b_b_s_m_old {
		color: $font-color-light;
		font-size: 20upx;
		margin-left: 10upx;
		text-decoration: line-through;
	}
	.loading_message{
		text-align: center;
		color: #0062CC;
	}
	.loading_message image{
		height: 60upx;
		width: 60upx;
	}
	.platop-css {
		width: 70upx;
		height: 70upx;
		position: fixed;
		bottom: 200upx;
		right: 40upx;
		z-index: 799;
		border-radius: 50%;
		font-size: 22upx;
		text-align: center;
		line-height: 6upx;
		background-color: rgba(255, 255, 255, 0.7);
		color: #8a8a8a;
		border: 1px #8a8a8a solid;
		font-weight: 900;
	
		image {
			width: 65%;
			border-radius: 50%;
		}
	}
</style>
